{include file="common/header" /}
<link rel="stylesheet" href="__LAYUIMINI__/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    body {
        background-color: #ffffff;
    }
    .img-item {
        position: relative;
        width: 96px;
        height: 96px;
        border-radius: 6px;
        margin-bottom: 10px;
        margin-right: 10px;
    }
    .img-item img {
        border-radius: 6px;
        width: 100%;
        height: 100%;
    }
    .img-item i {
        font-size: 20px;
        position: absolute;
        top: -10px;
        right: -10px;
    }

</style>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>{$title}修改</legend>
</fieldset>
<div class="layui-form layuimini-form">
    

    <div class="layui-form-item">
        <label class="layui-form-label required">标题</label>
        <div class="layui-input-block">
            <input type="text" class="layui-input" id="title" name="title"  value="{$info.title}" autocomplete="off" placeholder="请输入标题">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">分类</label>
        <div class="layui-input-block">
            <select name="cate_id">
              <!-- <option value="">顶级</option> -->
              {volist name="$treeList" id="vo"}
              <option value="{$vo.id}" {if $vo.id == $cate_id || $vo.id == $info.cate_id /} selected="" {/if}  {if $vo.module != $module /} disabled {/if} >{$vo.catname | raw}</option>
              {/volist}
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">排序</label>
        <div class="layui-input-block">
            <input type="number" name="orderid" value="{$info.orderid}" autocomplete="off" class="layui-input" placeholder="请输入排序">
        </div>
    </div>

    
    <div class="layui-form-item">
        <label class="layui-form-label required">简介</label>
        <div class="layui-input-block">
            <textarea name="desc" style="height: 80px;width: 90%;padding: 10px;border:1px solid #e6e6e6;">{$info.desc}</textarea>
        </div>
    </div>
    

    <div class="layui-form-item">
        <label class="layui-form-label required">内容</label>
        <div class="layui-input-block">
            <textarea name="content" id="container" style="height: 300px;">{$info.content}</textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">文章采集</label>
        <div class="layui-input-inline" style="width:300px;">
            <input type="text" id="WeChatUrl"  autocomplete="off" class="layui-input" placeholder="请输入微信公众号文章网址">
        </div>
        <div class="layui-input-inline">
            <button type="button" id="wechatcollect" class="layui-btn">采集</button>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="hidden" name="act" value="edit">
            <input type="hidden" name="id" value="{$id}">
            <button class="layui-btn" lay-submit lay-filter="saveBtn">确认保存</button>

            <button class="layui-btn layui-btn-primary" onclick="javascript:history.go(-1)" >返回</button>
        </div>
    </div>
</div>

<!-- 配置文件 -->
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="__STATIC__/js/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>

<script>

    layui.use(['form','iconPickerFa','upload','laydate'], function () {
        var form = layui.form,
            iconPickerFa = layui.iconPickerFa,
            layer = layui.layer,
            upload = layui.upload,
            laydate = layui.laydate,
            $ = layui.$;

        laydate.render({
            elem: '#ID-laydate-demo'
        });

        window.imgdelete = function(dom){
            $(dom).parent().remove();
        }

        $("#wechatcollect").click(function(){
            let WeChatUrl = $("#WeChatUrl").val();
            if(WeChatUrl == ''){
                layer.msg('请输入要采集的微信公众号文章网址',{icon:5});
                return;
            }
            if(WeChatUrl.length < 30){
                layer.msg('请正确输入要采集的微信公众号文章网址',{icon:5});
                return;
            }
            layer.confirm('你确定要执行采集吗?<br>网速、图片大小、数量<br>都跟采集的速度有直接关系', {
                title:"温馨提示",
                closeBtn:0,
                //shift:6,
                // anim:6,
                icon:0,
                btn: ['确定','取消'] //按钮
            }, function(){
                $(".btn").attr("disabled", true);
                var loading = layer.msg('数据采集中，请稍后...', {
                    icon: 16,offset: '300px',shade: 0.2,time:10000000
                });
                //var WeChatUrl = $("#WeChatUrl_"+field).val();
                //console.log(url);
                $.ajax({
                    type: 'POST',
                    url: "{:url('WeChat/weChatUrl')}",
                    data:{WeChatUrl:WeChatUrl},
                    dataType: 'json',
                    success: function(data){
                        layer.close(loading);
                        console.log(data)
                        // return false
                        if (data.errcode == 1) {
                            layer.msg(data.message, {icon: 1, time: 2000},function(){
                                $("#title").val(data.data.title);
                                $("#container").val(data.data.content);
                                var ue = UE.getEditor("container");
                                ue.ready(function () {
                                    ue.setContent(data.data.content); //赋值给UEditor 
                                });

                                //封面图
                                if(data.data.cover){
                                    console.log("tangy")
                                    var html = '';
                                    html +='<div class="img-item">';
                                    html +='    <a href="'+ data.data.cover +'" target="_blank"><img data-url="'+data.data.cover+'" src="'+ data.data.cover +'" alt=""></a>';
                                    html +='    <i  class="layui-icon layui-icon-close-fill" onclick="imgdelete(this)"></i>';
                                    html +='</div>';
                                    $('#image_show').html(html)
                                }

                            });
                        } else {
                            layer.msg(data.message, {icon: 2,time: 2000});
                        }
                        $(".btn").attr("disabled", false);
                    
                    },
                    error: function(){
                        layer.alert("服务器繁忙, 请联系管理员!");
                    }
                });
            });

        });

        upload.render({
            elem: '#image_up'
            ,url: "{:url('Index/dyupload')}" 
            // ,multiple: true
            //,accept: 'file' //普通文件
            ,field: 'dypic'
            ,before: function(obj){
            }
            ,done: function(res){
              if(res.errcode){
                var html = '';
                html +='<div class="img-item">';
                if(res.count == 'file'){
                    html +='    <a href="'+ res.data +'" target="_blank"><img data-url="'+res.data+'" src="/public/static/images/pdf.png" alt=""></a>';
                }else{
                    html +='    <a href="'+ res.data +'" target="_blank"><img data-url="'+res.data+'" src="'+ res.data +'" alt=""></a>';
                }
                html +='    <i  class="layui-icon layui-icon-close-fill" onclick="imgdelete(this)"></i>';
                html +='</div>';
                
                $('#image_show').html(html)
              }
            }
        });


        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.load(1, {
                shade: [0.3,'#000'] //0.1透明度的白色背景
            });
            var data = data.field;
            let content = ue.getContent();
            data.content = content;
            console.log(data)
            $.ajax({
                url:"{:url('Notice/edit')}",
                data:data,
                type:'post',
                dataType:'json',
                success:function(res){
                    console.log(res)
                    // return false
                    if(res.errcode != 1){
                        layer.msg(res.message,{icon: 2,time: 2000},function(){
                            layer.close(index);
                        })
                    }else{
                        layer.msg(res.message,{icon: 1,time: 1000},function () {
                            window.location.href = "{:url('Notice/list')}";
                        })
                    }
                    layer.close(index);
                },
                error : function(XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('网络失败，请刷新页面后重试!',{icon: 2,time: 2000})
                }
            });

            return false;
        });

    });
</script>
</body>
</html>